<template>
  <!-- 单根节点透传属性自动被添加到根元素上 -->
  <TransparentTransmissionAttributeChildrenA
    class="parent-class"
    style="color:skyblue;font-weight: bold"
    @click="console.log('父组件事件')"
    props-value="props"
  />

  <!-- 多根节点透传属性无自动透传行为，需要在子组件上使用$attrs显示绑定 -->
  <TransparentTransmissionAttributeChildrenB
    class="parent-class"
    style="color:skyblue;font-weight: bold"
    @click="console.log('父组件事件')"
    props-value="props"
  />
</template>

<script>
import {defineComponent} from 'vue';
import TransparentTransmissionAttributeChildrenA from '@/components/TransparentTransmissionAttributeChildrenA.vue';
import TransparentTransmissionAttributeChildrenB from '@/components/TransparentTransmissionAttributeChildrenB.vue';

export default defineComponent({
  name: 'TransparentTransmissionAttribute',
  components: {TransparentTransmissionAttributeChildrenB, TransparentTransmissionAttributeChildrenA}
});
</script>

<style scoped>
.parent-class {
  font-size: 10px;
}
</style>